<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>使用xhr发起GET请求</title>
    </head>
    <body>
        <button id="btn">使用xhr发起GET请求</button>
        <script>
            // 获取元素对象
            var btn = document.querySelector('#btn');
            // 绑定事件
            btn.onclick = function() {
                // TODO: 利用xhr 发起 GET 请求
                // 请求地址：http://www.liulongbin.top:3006/api/getbooks
                // 参考步骤：
                // 1. 创建 xhr 对象
                // 2. 调用 xhr.open() 函数，第一个参数设置请求方式，第二个参数设置请求路径
                // 3. 调用 xhr.send() 函数
                // 4. 监听 xhr.onreadystatechange 事件，通过 xhr.readyState 和  xhr.status 来判断请求是否成功
                let xhr = new XMLHttpRequest()
                xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
                xhr.send()
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        console.log(JSON.parse(xhr.responseText));
                    }
                }
            };
        </script>
    </body>
</html>
